<template>
  <a-modal
    v-model:visible="visible"
    :width="400"
    :mask-closable="false"
    title-align="center"
    simple
    @ok="handleModalOk"
    cancel-text="返回"
    @close="handleModalCancel"
  >
    <template #title>
      <icon-exclamation-circle-fill class="icon-delete" />
    </template>
    <div class="content">
      请确定是否删除<span class="text-red">{{ content || '该条数据' }}?</span>
    </div>
    <div class="extra">删除该条也会删除所有与其相关数据，请慎重选择</div>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon';
const props = defineProps({
  content: String,
  handleModalOk: Function,
  handleModalCancel: Function,
});
let visible = ref(true);
</script>
<style lang="less" scoped>
.icon-delete {
  color: #f53f3f;
  font-size: 40px;
}

.content {
  height: 32px;
  color: #000;
  font-weight: 500;
  font-size: 14px;
  line-height: 32px;
  text-align: center;

  .text-red {
    color: #f53f3f;
  }
}

.extra {
  height: 32px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  line-height: 22px;
  line-height: 32px;
  text-align: center;
}
</style>
